<template>
    <div>
        <el-drawer v-model="showDialog" :show-close="true" title="保险规则" size="900px" :modal="false"
                   modal-class="AIdrawer"
                   class="AIdrawerWrapper">
            <div>
                <div class="mb-40px flex flex-col gap-20px text-14px">
                    <div class="flex items-center gap--8px">
                        <div class="w-100px text-#9497B1 flex-no-shrink">规则名称：</div>
                        <div class="text-#202536">111111111111111111111111</div>
                    </div>
                    <div class="flex items-center gap--8px">
                        <div class="w-100px text-#9497B1 flex-no-shrink">适用范围：</div>
                        <div class="text-#202536">111111111111111111111111</div>
                    </div>
                    <div class="flex items-center gap--8px">
                        <div class="w-100px text-#9497B1 flex-no-shrink">数据推送地：</div>
                        <div class="text-#202536">111111111111111111111111</div>
                    </div>
                    <div class="flex items-center gap--8px">
                        <div class="w-100px text-#9497B1 flex-no-shrink">密钥：</div>
                        <div class="text-#202536">111111111111111111111111</div>
                    </div>
                    <div class="flex items-center gap--8px">
                        <div class="w-100px text-#9497B1 flex-no-shrink">授权码：</div>
                        <div class="text-#202536">111111111111111111111111</div>
                    </div>
                </div>
                <div class="text-#565868 text-16px font-bold mb-16px">映射关系</div>
                <el-card>
                    <el-table highlight-current-row :data="tableData" row-key="id" default-expand-all
                              :header-cell-style="{background: '#FAFAFC', color: '#202536'}">
                        <el-table-column prop="date" label="原始字段"/>
                        <el-table-column prop="name" label="原始字段名称"/>
                        <el-table-column prop="address" label="转换后字段名"/>
                    </el-table>
                </el-card>
            </div>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
})
const tableData = ref([
    {
        id: 1,
        date: '2016-05-02',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: '2016-05-04',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
        children: [
            {
                id: 31,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                id: 32,
                date: '2016-05-01',
                name: 'wangxiaohu',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ],
    },
    {
        id: 4,
        date: '2016-05-03',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
const showDialog = ref(false)
const emits = defineEmits(['update:show'])
watch(() => props.show, (newVal) => {
    showDialog.value = newVal
    if (newVal) {
        console.log(11)
    }
})

watch(showDialog, (newVal) => {
    emits('update:show', newVal)
})
</script>
<style lang="scss" scoped>
.AIdrawerWrapper {
    margin-left: auto;
}

:deep(.AIdrawerWrapper) {
    background-color: #FAFAFC !important;
}

:deep(.el-drawer__header) {
    border-bottom: 1px solid #DEE0E3;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

:deep(.AIdrawer) {
    margin-left: auto;
    width: 0;
}
</style>